---
title: Actualizando tu dApp a RainbowKit v2
description: RainbowKit y Wagmi han sido promovidos a v2
image: guia-boton-arcoiris.png
---

# Migrando a RainbowKit y Wagmi v2

Las dependencias `wagmi` y `viem` ahora han alcanzado la versión `2.x.x` con cambios disruptivos.

Sigue los pasos a continuación para migrar.

**1. Actualiza RainbowKit, `wagmi`, y `viem` a sus últimas versiones**

```bash
npm i @rainbow-me/rainbowkit wagmi viem@2.x
```

**2. Instalar la dependencia `@tanstack/react-query`**

Con Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) es ahora una dependencia necesaria.

Instálalo con el siguiente comando:

```bash
npm i @tanstack/react-query
```

**3. Actualiza tus configuraciones de RainbowKit y Wagmi**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Verifica los cambios significativos en `wagmi` y `viem`**

Si utilizas hooks de `wagmi` y acciones de `viem` en tu dApp, necesitarás seguir las guías de migración para v2:

- [Guía de Migración a Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Cambios Significativos en Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Cambios en RainbowKit

**1. Comportamiento mejorado para billeteras EIP-6963**

Las billeteras que soportan el nuevo estándar de conexión EIP-6963 (incluyendo Rainbow, MetaMask y más) ahora aparecerán automáticamente en una sección `Instalado` durante la experiencia de Conectar Billetera, asegurando que los usuarios siempre puedan encontrar sus billeteras favoritas y conectarse a las dApps sin conflictos o botones de respaldo.

Los desarrolladores continúan teniendo control total sobre la Lista Personalizada de Billeteras para enfatizar las billeteras preferidas por los usuarios finales. Se recomienda continuar incluyendo `injectedWallet` y `walletConnectWallet` en tu lista para soportar todas las plataformas.

**2. Configuración de Wagmi con getDefaultConfig**

Esta nueva API simplifica la experiencia de configuración y reemplaza la necesidad de usar `createConfig` de Wagmi directamente. La configuración de cadenas se simplifica, incluyendo proveedores públicos inferidos para `transports`.

La lista de billeteras predeterminada se incluirá automáticamente, relegando la necesidad de usar `getDefaultWallets` y `connectorsForWallets`.

Puedes crear una Lista de Billeteras Personalizadas pasando conectores de billetera importados o personalizados a `wallets`. Ya no es necesario instanciar conectores de billetera y pasar `projectId` y `chains`.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Ya no necesitas pasar `chains` a `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. Cadenas Personalizadas**

El tipo `Chain` ha cambiado de acuerdo con Wagmi v2 y continúa soportando los metadatos `iconUrl` e `iconBackground` de RainbowKit.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Ejemplo con `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overrides */
+ ],
});
```

Ejemplo con `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. Billeteras Personalizadas**

Los conectores de billetera de RainbowKit han experimentado cambios sustanciales para soportar Wagmi v2. Consulta la [documentación actualizada](https://www.rainbowkit.com/docs/custom-wallets) y un [conector de ejemplo](https://github.com/rainbow-me/rainbowkit/tree/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) para actualizar cualquier Conector de Billetera Personalizado en tu dApp.

Los conectores de billetera ahora también soportan el estándar EIP-6963 con la propiedad `rdns`. Asegúrate de que esto esté poblado para prevenir referencias duplicadas a billeteras que soportan EIP-6963 en tu lista de billeteras.

> Por favor, reporta cualquier problema o comentario sobre RainbowKit v2 en GitHub [aquí](https://github.com/rainbow-me/rainbowkit/issues/new/choose).
